<template>
  <!-- element-ui级联组件 当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择 -->
  <!--
    value / v-model	选中项绑定值
    options	可选项数据源，键名可通过 Props 属性配置
    props	配置选项
      value	指定选项的值为选项对象的某个属性值	默认'value'
      label	指定选项标签为选项对象的某个属性值	默认'label'
      children	指定选项的子选项为选项对象的某个属性值 默认'children'
    separator	选项分隔符
  -->
  <el-cascader
    :value="value"
    :options="selOptions"
    :props="selProps"
    size="mini"
    separator="-"
    @change="handleChange"
  />
</template>

<script>
import { getDepartment } from '@/api/department'
import { transListToTreeData } from '@/utils'

export default {
  props: {
    // 存储的是部门的id
    value: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      // 赋值给 级联组件的options
      selOptions: [],
      selProps: {
        // 要展示的字段
        label: 'name',
        // 要存储的字段 发给后台存表
        value: 'id'
      }
    }
  },
  created() {
    this.getDeptTreeInfo()
  },
  methods: {
    async getDeptTreeInfo() {
      // 将组织架构的数据 转化树形赋值给treeData
      this.selOptions = transListToTreeData(await getDepartment(), 0)
    },
    handleChange(v) {
      console.log(v)
      // 取到数组的最后一次
      if (v && v.length) {
        // 将最后一位的id取出来 传出去给父组件
        this.$emit('input', v[v.length - 1])
      } else {
        // 如果长度为0 说明值为空
        this.$emit('input', null)
      }
    }
  }
}
</script>
